<template>
	<view class="page">
		<Update v-if="updatePopup" :versionInfo="versionInfo"></Update>
		<Merchants v-if="merchantsPopup"></Merchants>
		<ContactUs v-if="contactUsPopup" v-on:gotourl='contactUs'></ContactUs>
		<view class="status-bar"></view>
		<view class="top">
			<image src="/static/img/login-top.png" class="login-top" mode="aspectFill"></image>
			<image :src="getmemberInfo.avatarUrl" class="user" v-if="token==1"></image>
			<image src="/static/img/not-login.png" class="user" v-else></image>
			<text class="wechat-name" v-if="token==''" @click="toLogin">立即登录	</text>

			<!-- 用户头像 -->
			<text class="wechat-name" v-if="token==1">{{getmemberInfo.nickName}}</text>
			<view class="share-wrap">
				<image src="/static/img/share.png" class="share"></image>
				<text class="share-content" @click="shareApp">分享APP</text>
			</view>
		</view>
		<view class="info">
			<!-- <view class="info-item" v-for="(item,index) in info" :key="index" @click="toPay(index)">
				<image :src="item.icon" class="pay"></image>
				<text class="pay-content">{{item.content}}</text>
				<view class="number">
					<text>{{item.number}}</text>
				</view>
			</view> -->
			<view class="info-item" @click="toPay(0)">
				<image src="/static/img/pay.png" class="pay"></image>
				<text class="pay-content">待付款</text>
				<view class="number" v-if="count_unpay">
					<text>{{orderCount.count_unpay}}</text>
				</view>
			</view>
			<view class="info-item" @click="toPay(1)">
				<image src="/static/img/send.png" class="pay"></image>
				<text class="pay-content">待发货</text>
				<view class="number" v-if="count_unsend">
					<text>{{orderCount.count_unsend}}</text>
				</view>
			</view>
			<view class="info-item" @click="toPay(2)">
				<image src="/static/img/transport.png" class="pay"></image>
				<text class="pay-content">运输中</text>
				<view class="number" v-if="count_sending">
					<text>{{orderCount.count_sending}}</text>
				</view>
			</view>
			<view class="info-item" @click="toPay(3)">
				<image src="/static/img/history.png" class="pay"></image>
				<text class="pay-content">历史</text>
				<!-- <view class="number">
					<text>{{orderCount.count_unpay}}</text>
				</view> -->
			</view>
			
		</view>
		<image :src="firstImgurl" class="summer"></image>
		<view class="bottom">
			<view class="info-wrap" @click="toConsume">
				<text>消费记录</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toHistory">
				<text>浏览记录</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toAccount">
				<text>账号设置</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="contactUs">
				<text>联系客服</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toAgreement">
				<text>平台协议</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="toMerchants">
				<text>商家入驻</text>
				<image src="/static/img/arrow.png"></image>
			</view>
			<view class="info-wrap" @click="update"  style="border-bottom: none;">
				<text>检测更新</text>
				<text style="margin-left: 370rpx;color:rgba(153,153,153,1);">V {{this.version}}</text>
				<image src="/static/img/arrow.png"></image>
			</view>
		</view>
		<image :src="twoImgurl" class="luck" ></image>
		<view class="logout" v-if="showLogout">
			<text @click="loginExit">退出登录</text>
		</view>
		<!-- <view class="logout">
			<text @click="loginExit">退出登录</text>
		</view> -->
		<text class="network">有派网络@技术支持</text>
		<Authority v-if='showAuthority' :closeBtn='closeAuthority' :btnFunction='authorityFun'></Authority>
	</view>
</template>

<script>
	import {
		request
	} from '../../request/index.js';
	import Update from '@/components/Update';
	import Merchants from '@/pages/my/MerchantsSettled';
	import ContactUs from '@/components/ContactUs';
	import Authority from '@/components/authorityPopup.vue'
	export default {
		onLoad: function(options) {
			//调用获取图片的方法
			this.getMineImgurl();
			this.getMineImgurlT();
			//获取用户登录信息的token  缓存  和基本信息
			this.gettoken();
			this.getmember();
			this.GetOrderCount()
			//获取强制更新缓存
			this.fore();
		
		},
		onShow() {
			//获取强制更新缓存
			this.fore();
			
			this.GetOrderCount();
			this.gettoken();
			this.getmember();
		},
		data() {
			return {
				/* info: [{
						content: '待付款',
						icon: '/static/img/pay.png',
						number: 1
					},
					{
						content: '待发货',
						icon: '/static/img/send.png',
						number: 3,
					},
					{
						content: '运输中',
						icon: '/static/img/transport.png',
						number: 5,
					},
					{
						content: '历史',
						icon: '/static/img/history.png',
						number: 32
					}
				], */
				updatePopup: false,
				merchantsPopup: false,
				contactUsPopup: false,
				firstImgurl: '',
				twoImgurl: '',
				token: '',
				// getmember: '',

				getmemberInfo:'',
				versionInfo:[],
				orderCount:'',
				count_unpay:false,
				count_unsend:false,
				count_sending:false,
				showAuthority:false,
				showLogout:false,
				version:''

			}
		},
		components: {
			Update,
			Merchants,
			ContactUs,
			Authority
		},
		methods: {
			
				
			//获取token 
			gettoken() {
				var t=this;
				uni.getStorage({
					key: "token",
					success(e) {
						
					}
				})
			},

			//获取用户缓存信息
			getmember() {
				var t=this;
				uni.getStorage({
					key: "member",
					success(e) {
						t.getmemberInfo = e.data;
						if(t.getmemberInfo.phone!=null&&t.getmemberInfo.phone!=''&&typeof(t.getmemberInfo.phone)!='undefind'){
							t.token = 1
							t.showLogout = true
						}
					
					},
					fail() {
						t.getmember();
					}
				})
			},
			//强制更新缓存
			fore(){
				
				var that = this
				let version = uni.getStorageSync('fore')
				
				console.log(uni.getStorageSync('fore'),'强制更新缓存开始')
				if(version.status == 1){
					//status= 1 说明更新 返回数据
					that.updatePopup = true;
					that.versionInfo = uni.getStorageSync('fore')
				}else{
					//删除缓存
					uni.removeStorageSync("fore")
					this.updatePopup = false;
				}
			},
			//APP检测更新
			update() {
				console.log('客户端 获取 版本号 appid 给后端')
				//客户端 获取 版本号 appid 给后端 根据返回值做判断是否需要展示更新数据
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.version = plus.runtime.version
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				// let version = '1.1.1'
				// #endif
		
				this.$api.getVersion({
					appid: '__UNI__7B2FD7E',
					version:this.version
				}).then(res => {
					if (res.data.status == true) {
						if(res.data.data.status == 1){
							//status= 1 说明更新 返回数据
							this.updatePopup = !this.updatePopup;
							this.versionInfo = res.data.data
						}else{
							uni.showToast({
							   title:'暂无版本更新' ,		
							})
						}
					}
				})
			},
			toDownload(){
				
				uni.navigateTo({
					url:'/pages/download/download?url='+this.versionInfo.url+'&note='+this.versionInfo.note+'&version='+this.versionInfo.version+'&size='+this.versionInfo.size+'&update_time='+this.versionInfo.update_time
				})
			},
			toHistory() {
				if(this.token == ''){
					uni.showToast({
					   title:'请先登录' ,
												
					})
				}else{
					uni.navigateTo({
						url: '/pages/goods/BrowsingHistory'
					})
				}
				
			},
			toAccount() {
				uni.navigateTo({
					url: '/pages/my/AccountSettings'
				})
			}, 
			//获取订单数量
			GetOrderCount(){
				//获取当前版本号
				this.version = plus.runtime.version
				this.$api.GetOrderCount({
				}).then(res => {
					if (res.data.status == true) {
						this.orderCount = res.data.data

						if(this.orderCount.length!=0){
							this.count_unpay = res.data.data.count_unpay
							this.count_unsend = res.data.data.count_unsend
							this.count_sending = res.data.data.count_sending
						}

						if(this.count_unpay==null){
							count_unpay=false;
						}
						if(this.count_unsend==null){
							count_unsend=false;
						}
						if(this.count_sending==null){
							count_sending=false;
						}
					} 
				})
			},
			//我的页消费记录
			toConsume() {
				if(this.token == ''){
					uni.showToast({
					   title:'请先登录' ,
												
					})
				}else{
					uni.navigateTo({
						url: '/pages/my/ConsumeHistory'
					})
				}
			
			},
			//平台协议
			toAgreement() {
				uni.navigateTo({
					url: '/pages/my/Agreement'
				})
			},
			closeUpdatePopup() {
				//删除缓存
				
				uni.removeStorageSync("fore")
				this.updatePopup = false;
				
			},
			toMerchants() {

				this.merchantsPopup = !this.merchantsPopup;
				uni.navigateTo({
					url: 'pages/my/MerchantsSettled'
				})
			},
			closeMerchantsPopup() {
				this.merchantsPopup = false
			},
			//获取图片, 我的页广告1
			getMineImgurl() {
				this.$api.getAdvert({
					advert_type: 2
				}).then(res => {
					if (res.data.status == true) {
						this.firstImgurl = res.data.data.imgurl
					} else {
						uni.showToast({
							title: '暂无数据',

						})
					}

				})
			},
			//获取图片, 我的页广告2
			getMineImgurlT() {
				this.$api.getAdvert({
					advert_type: 3
				}).then(res => {
					if (res.data.status == true) {
						this.twoImgurl = res.data.data.imgurl
						console.log(res.data.data)
					}

				})
			},
			//联系客服 点击事件
			contactUs() {
				this.contactUsPopup = !this.contactUsPopup;

			},
			closeContactUsPopup() {
				this.contactUsPopup = false;
			},
			shareApp() {
				uni.navigateTo({
					url: '/pages/my/ShareApp'
				})
			},
			toPay(index) {
			
				if(this.token == ''){
					uni.showToast({
					   title:'请先登录' ,
												
					})
				}else{
					uni.navigateTo({
						url: '/pages/order/NotPay?status=' + index
					})
				}
				
			},
			//退出登录
			loginExit() {
				var t=this;
				t.token = ''
				t.showLogout=false
				//用户缓存信息
				uni.removeStorage({
					key: "member",
					success: function(res) {
						// uni.showToast({
						// 	title: '退出登录成功',
						// })
						// t.onLoad();
					}
				})
				//清除token
				uni.removeStorage({
					key: "token",
					success: function(res) {
						uni.showToast({
							title: '退出登录成功',
						})
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/index/index'
							})
						},1000)
						
						
					}
				})
			

			},
			//立即登录 
			//先调微信授权  授权成功 跳登录页
			//app第三方登录

			toLogin() {
				// 登录页
				uni.navigateTo({
					url: '/pages/login/Login'
				})

			},
			/* //打开授权弹框
			openAuthority(){
			
				let memberInfo = uni.getStorageSync('member')
				console.log(memberInfo,'用户信息')
				if(memberInfo==null||memberInfo==''|| typeof(memberInfo) =='undefind'){
					this.showAuthority = true
				}else{
					//判断授权之后  是否有手机号
					if(memberInfo.phone==null||memberInfo.phone==''|| typeof(memberInfo.phone) =='undefind'){
						uni.showToast({
						   title:'您尚未注册，正前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
							
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return
					}
				}
				
			},	
			//关闭授权弹框
			closeAuthority(){
				this.showAuthority = false
			},
			authorityFun(){
				var that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.showLoading({
							    title: '授权中'
							})
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log("App微信获取用户信息成功", infoRes.userInfo);
											that.showAuthority = false
											
											
											console.log(infoRes.userInfo.unionId,'登录unionId')
											//在这请求获取用户信息的接口 手机号 有返回值存member 没有 则存 微信返回的
											that.$api.getUnidMember({unionId:infoRes.userInfo.unionId}).then(res => {
												console.log(res)
												console.log(res.data)
												console.log(res.data.phone,'授权获取用户手机号')
												console.log(res.data.minfo,'状态')
												if(res.data.status == true){
													if(res.data.minfo == true){
														//数据库中的 可能有phone 也能 没有 但一定有 头像 昵称 unionid
														uni.setStorage({
															key: "member",
															data: res.data.data
														})
														uni.setStorage({
															key: "token",
															data: res.data.data.token
														})
														
													}else if(res.data.minfo == false){
														//微信返回的 没有phone
														uni.setStorage({
															key: "member",
															data: infoRes.userInfo
														})
													}
													
												}
												console.log(typeof(res.data.phone),'2222222222222222222')
												if(res.data.data.phone==null||res.data.data.phone==''||typeof(res.data.data.phone)=='undefind'){
													//注册页
													uni.navigateTo({
														url:'/pages/register/Register'
													}) 
												}else{
													//首页
													uni.switchTab({
														url:'/pages/index/index'
													})
												}
													uni.hideLoading();	
												
											})
										}
									});
								
								},
								fail: function(res) {
									console.log("App微信获取用户信息失败", res);
								}
							})
						}
					}
				});
			}, */
		
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: calc(100vh - var(--status-bar-height));
		padding-bottom: 98rpx;
		/* padding-top: calc(var(--status-bar-height)); */
	}
	.status-bar{
		width: 100%;
		height: var(--status-bar-height);
		background-color: #FEB147;
		position: fixed;
		z-index: 10;
	}
	.top {
		position: relative;
		width: 750rpx;
		height: 376rpx;
		margin-top: -5rpx;
	}

	.login-top {
		width: 750rpx;
		height: 390rpx;
	}

	.user {
		position: absolute;
		left: 80rpx;
		top: 176rpx;
		width: 138rpx;
		height: 138rpx;
		border-radius: 100%;
	}

	.wechat-name {
		position: absolute;
		top: 206rpx;
		left: 277rpx;
		height: 38rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-decoration: underline;
	}

	.share-wrap {
		position: absolute;
		right: 23rpx;
		top: 268rpx;
		width: 153rpx;
		height: 56rpx;
	}

	.share {
		width: 153rpx;
		height: 56rpx;
	}

	.share-content {
		position: absolute;
		top: 5rpx;
		left: 22rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		margin-top: -20rpx;
		width: 690rpx;
		height: 148rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 20rpx;
		margin-left: 30rpx;
	}

	.pay {
		width: 51rpx;
		height: 51rpx;
	}

	.pay-content {
		display: block;
		margin-top: 10rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	} 

	.number {
		position: absolute;
		top: -15rpx;
		right: -20rpx;
		width: 25rpx;
		height: 25rpx;
		background: rgba(255, 44, 44, 1);
		border: 1rpx solid rgba(255, 44, 44, 1);
		border-radius: 50%;
	}

	.number text {
		display: block;
		margin: 0 auto;
		width: 25rpx;
		height: 25rpx;
		text-align: center;
		line-height: 25rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.info-item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.summer {
		width: 750rpx;
		height: 210rpx;
		margin-top: 30rpx;
	}

	.bottom {
		width: 750rpx;
		height: 572rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -3rpx 7rpx 0rpx rgba(177, 177, 177, 0.4), 0px 3px 7px 0px rgba(177, 177, 177, 0.4);
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.bottom view {
		border-bottom: 1rpx solid #eee;
	}

	.info-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		height: 79rpx;
		margin-left: 33rpx;
	}

	.info-wrap text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.info-wrap image {
		width: 14rpx;
		height: 26rpx;
	}

	.bar {
		width: 670rpx;
		height: 1rpx;
		background: rgba(204, 204, 204, 1);
		margin-left: 40rpx;
	}

	.luck {
		width: 750rpx;
		height: 216rpx;
		margin-top: 30rpx;
	}

	.logout {
		display: block;
		margin-top: 20rpx;
		position: relative;
		width: 750rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(177, 177, 177, 0.29);
	}

	.logout text {
		position: absolute;
		top: 15rpx;
		left: 309rpx;
		height: 32rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
	}

	.network {
		display: block;
		width: 100%;
		text-align: center;
		
		margin-top: 60rpx;
		height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 50rpx;
	}
</style>
